<template>
  <div class="warehoust-con table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>

    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button type="primary" size="medium" @click="show('add')" v-if="$authPass('inventory.warehouse.save')">添加仓库</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-singe-line show-border-table" :loading="loading" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column v-for="item of columns" :title="item.title" :align="item.align" :data-index="item.dataIndex" :width="item.width">
                <template v-if="item.title == '仓库名称'" #cell="{ record }">
                  <span class="fl">{{ record.warehouseName }}</span>
                  <span class="fl flag" v-if="record.isDefault">默</span>
                </template>
                <template v-else-if="item.title == '状态'" #cell="{ record }">
                  <span>{{ record.status == 1 ? '启用' : '禁用' }}</span>
                </template>
                <template v-else-if="item.title == '仓库属性'" #cell="{ record }">
                  <span>{{ record.warehouseAttribute == 1 ? '国内仓' : '海外仓' }}</span>
                </template>
                <template v-else-if="item.title == '可补货站点'" #cell="{ record }">
                  <span>{{ record.warehouseAttribute == 2 ? record.replenishPoint : '' }}</span>
                </template>
                <template v-else-if="item.title == '管理员'" #cell="{ record }">
                  <span>{{ getUserName(record) }}</span>
                </template>
                <template v-else-if="item.title == '国家'" #cell="{ record }">
                  <span>{{ record.country }}-{{ record.countryCode }}</span>
                </template>
                <template v-else-if="item.title == '操作'" #cell="{ record }">
                  <a-button type="text" @click="show('edit', record)" v-if="$authPass('inventory.warehouse.edit')">编辑</a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <Detail :detail="detail" ref="modelEl" @save="searchByVal" :shopMarkList="shopMarkList" />
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue'
  import TableWrap from '@/components/TableWrap.vue'
  import Detail from './components/warehouseListDetail.vue'
  import { FilterTableItem } from '@/types/components'
  import FilterTable from '@/components/TableFilter.vue'
  import { stockOptions, siteSearchList } from './options'
  import { warehouiseList } from '@/api/warehouse'
  import { getShopMarketAll } from '@/api/base'
  import _ from 'lodash-es'
  export default defineComponent({
    components: {
      TableWrap,
      Detail,
      FilterTable,
    },
    setup() {
      const data = reactive({
        searchValue: {},
        loading: false,
        columns: [
          { title: '仓库ID', dataIndex: 'warehouseCode', align: '', width: '' },
          { title: '仓库名称', dataIndex: 'warehouseName', align: '', width: '' },
          { title: '状态', dataIndex: 'status', align: '', width: '' },
          { title: '存货类型', dataIndex: 'stockType', align: '', width: '' },
          { title: '仓库属性', dataIndex: '', align: '', width: '' },
          { title: '可补货站点', dataIndex: '', align: '', width: '' },
          { title: '管理员', dataIndex: '', align: '', width: '' },
          { title: '国家', dataIndex: '', align: '', width: '' },
          { title: '操作', dataIndex: '', align: '', width: 60 },
        ],
        tableList: [],
        shopMarkList: [],
        detail: { type: '', data: {} },
        filterItem: [
          {
            type: 'input_keyword',
            key: 'warehouseName',
            keyItems: [
              { label: '仓库名称', value: 'warehouseName' },
              { label: '仓库ID', value: 'warehouseCode' },
            ],
            keyWidth: '90',
            value: ref(),
            placeholder: '请输入',
            label: '仓库名称',
            width: 160,
            isMultiple: false,
          },
          {
            key: 'status',
            label: '仓库状态',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [
              {
                label: '仓库状态',
                value: '',
              },
              {
                label: '停用',
                value: '0',
              },
              {
                label: '启用',
                value: '1',
              },
            ],
          },
          {
            key: 'warehouseAttribute',
            label: '仓库属性',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [
              {
                label: '仓库属性',
                value: '',
              },
              {
                label: '国内仓',
                value: '1',
              },
              {
                label: '海外仓',
                value: '2',
              },
            ],
          },
          {
            key: 'replenishPoint',
            label: '可补货站点',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
          },
          {
            key: 'stockType',
            label: '存货类型',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: stockOptions(true),
          },
        ],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
      })
      const modelEl = ref()

      const searchByVal = (info: any) => {
        let obj = _.cloneDeep(info)
        data.pageNation.pageNum = 1
        getList(obj)
      }

      const show = (type: string, item?: any) => {
        data.detail.type = type
        item ? (data.detail.data = item) : (data.detail.data = {})
        modelEl.value.visible = true
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async (searchValue?: any) => {
        let params = {
          ...searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await warehouiseList(params)
        if (res.code == 'SUCCESS') {
          data.tableList = res.data.records
          data.pageNation.total = res.data.total
        }
        data.loading = false
      }

      const getShopMarket = async () => {
        const res: any = await getShopMarketAll()
        let arr = res.data.map((e: any) => {
          e.label = e.marketplaceCode
          e.value = e.marketplaceCode
          return e
        })
        data.shopMarkList = arr
        let optionItems = _.cloneDeep(arr)
        optionItems.unshift({ label: '可补货站点', value: '' })
        data.filterItem[3].optionItems = optionItems
      }
      const getUserName = (data: any) => {
        let arr: any = []
        arr = data.managers?.map((e: any) => e.userName) || []
        return arr.join(',')
      }
      getList()
      getShopMarket() // 获取所有站点
      return {
        ...(toRefs(data) as any),
        modelEl,
        getList,
        show,
        searchByVal,
        changePage,
        sizeChange,
        getUserName,
      }
    },
  })
</script>

<style lang="less" scoped>
  .warehoust-con {
    width: 100%;
    height: calc(100vh - @menuAndTabHeight);

    .flag {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      border-radius: 20px;
      border: 1px solid red;
      color: red;
      margin-left: 5px;
    }
    .search-con {
      // display: flex;
      overflow: hidden;
      background-color: white;
      // padding: 0 10px;
      box-sizing: border-box;
    }
  }
</style>
